<template>
  <el-container direction="vertical" class="container">
    <el-row>
      <el-col :span="8">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="searchForm.title" placeholder="请输入标题关键字" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="16">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openHandler">新增公告</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%;height: 568px"
          max-height="568"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <!-- <el-table-column
            prop="id"
            label="id"
            width="200"
            align="center"
          /> -->
          <el-table-column
            label="标题"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <a href="javascript:;" @click="showNotice(scope.row.id)">{{ scope.row.title }}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="author"
            label="作者"
            width="200"
            align="center"
          />
          <el-table-column
            label="发布时间"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span style="margin-left: 10px">{{ scope.row.pushTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="medium"
                icon="el-icon-edit-outline"
                title="编辑"
                round
                @click="handleEdit(scope.$index, scope.row)"
              />
              <el-button
                size="medium"
                type="danger"
                title="删除"
                icon="el-icon-delete"
                round
                @click="handleDelete(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="tableQuery.page"
          :page-size="tableQuery.pageSize"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <keep-alive>
      <notice-dialog
        :id="chooseData.id"
        :dialog-visible="dialogFormVisible"
        :dialog-title="dialogTitle"
        :title="chooseData.title"
        :content="chooseData.content"
        @closeDialog="closeHandler"
        @openDialog="openHandler"
        @getTable="getTable"
      />
    </keep-alive>
    <show-notice
      :show-notice-visible="showNoticeVisible"
      :choose-id="chooseData.id"
      @closeShowNotice="closeHandler"
    />

    <!-- <notice-dialog :dialog-visible="dialogFormVisible" :close-dialog="closeDialog" /> -->

  </el-container>

</template>

<script>
import { getNotice, delNotice } from '@/api/notice'
// import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils/index'
import { Message, MessageBox } from 'element-ui'
import NoticeDialog from './components/NoticeDialog'
import ShowNotice from '@/components/ShowNotice'
export default {
  name: 'Notice',
  components: { NoticeDialog, ShowNotice },
  data() {
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('密码长度必须大于6位'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      searchForm: {
        title: ''
      },
      listLoading: true, // 列表加载动画
      currUser: this.$store.getters.roles, // 获取当前登录用户
      tableData: null, // 表格数据
      total: 0, // 表格总数
      isHidePage: false, // 是否隐藏分页
      tableQuery: { // 表格查询参数
        page: 1,
        pageSize: 10,
        title: ''
        // token: getToken()
      },
      dialogFormVisible: false, // 对话框是否隐藏
      dialogTitle: '',
      chooseData: {
        title: '',
        content: '',
        id: ''
      },
      showNoticeVisible: false
    }
  },
  created() {
    this.getTable()
  },
  // activated() {
  //   this.$on('dialogClose', this.dialogFormVisible = false)
  // },
  methods: {
    openHandler() {
      this.dialogFormVisible = true
      this.dialogTitle = '添加公告'
    },
    editHandler() {
      this.dialogFormVisible = true
      this.dialogTitle = '编辑公告'
    },
    showNotice(id) {
      this.chooseData.id = id
      this.showNoticeVisible = true
    },
    closeHandler() {
      this.dialogFormVisible = false
      this.showNoticeVisible = false
      this.chooseData = {
        id: '',
        title: '',
        content: ''
      }
    },
    onSubmit() {
      this.tableQuery.title = this.searchForm.title
      this.getTable()
    },
    getTable() {
      this.listLoading = true
      getNotice(this.tableQuery).then(response => {
        if (response) {
          const list = response.data.list
          list.forEach(element => {
            element.pushTime = parseTime(element.pushTime)
          })
          this.tableData = list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1 * 1000)
        }
        this.listLoading = false
      })
      if (this.total / this.tableQuery.pageSize <= 1) {
        this.isHidePage = true
      }
      // if(this.$store.getters.roles)
    },
    handleCurrentChange(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handlePreClick(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handleNextClick(val) {
      this.tableQuery.page = val
      this.getTable()
    },
    handleEdit(index, row) {
      this.chooseData.title = row.title
      this.chooseData.content = row.content
      this.chooseData.id = row.id
      this.dialogFormVisible = true
      this.dialogTitle = '编辑公告'
    },
    handleDelete(index, row) {
      MessageBox.confirm('将删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNotice(row.id).then(response => {
          Message({
            message: response.data.message,
            type: 'success',
            duration: 5 * 1000
          })
        })
        this.getTable()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
  padding: 10px;
  a:hover{
    color: blue;
    text-decoration: underline;
  }
}
</style>
